import React, { Component } from "react";
import "./index.css";
import axios from "../../plugins/axios.js";

import {
    NavBar,
    InputItem,
    Toast,
    WingBlank,
    WhiteSpace,
    Button,
} from "antd-mobile";

export default class Register extends Component {
    constructor(props) {
        super(props);
        this.state = {
            usernameHasError: false,
            username: "",
            password: "",
            nickname: "",
        };

        // 绑定 this
        this.handleUsernameChange = this.handleUsernameChange.bind(this);
        this.handlePasswrodChange = this.handlePasswrodChange.bind(this);
        this.handleNicknameChange = this.handleNicknameChange.bind(this);
        this.register = this.register.bind(this);
        this.goLogin = this.goLogin.bind(this);
    }

    handleUsernameError() {
        Toast.fail("用户名只能是 6 到 11 位的字符", 2);
    }

    handleUsernameChange(username) {
        this.setState({ username });
        if (username.length < 1 || username.length > 11) {
            this.setState({ usernameHasError: true });
        } else {
            this.setState({ usernameHasError: false });
        }
    }

    handlePasswrodChange(password) {
        this.setState({ password });
    }

    handleNicknameChange(nickname) {
        this.setState({ nickname });
    }

    async register() {
        const res = await axios.post("/register", {
            username: this.state.username,
            password: this.state.password,
            nickname: this.state.nickname,
        });
        // 注册失败，给予提示
        if (res.code !== 201) {
            Toast.fail(res.message);
            return;
        }
        // 注册成功，跳转到登录页面
        this.props.history.push("/login");
    }

    goLogin() {
        this.props.history.push("/login");
    }

    render() {
        return (
            <div className="register">
                {/* 顶部导航栏 */}
                <NavBar mode="dark">网站博客</NavBar>

                <div className="register-box">
                    <h3 className="register-title">用户注册</h3>

                    <WingBlank>
                        {/* 用户名输入框 */}
                        <InputItem
                            placeholder="请输入用户名"
                            error={this.state.usernameHasError}
                            onErrorClick={this.handleUsernameError}
                            onChange={this.handleUsernameChange}
                            value={this.state.username}
                        />

                        <WhiteSpace />

                        {/* 密码输入框 */}
                        <InputItem
                            type="password"
                            placeholder="请输入密码"
                            onChange={this.handlePasswrodChange}
                            value={this.state.password}
                        />

                        <WhiteSpace />

                        {/* 昵称输入框 */}
                        <InputItem
                            placeholder="请输入昵称"
                            onChange={this.handleNicknameChange}
                            value={this.state.nickname}
                        />

                        <WhiteSpace />

                        <Button
                            type="primary"
                            size="small"
                            block="true"
                            onClick={this.register}
                        >
                            注册
                        </Button>

                        <WhiteSpace />

                        <Button
                            type="ghost"
                            size="small"
                            block="true"
                            onClick={this.goLogin}
                        >
                            已有账号，去登录？
                        </Button>
                    </WingBlank>
                </div>
            </div>
        );
    }
}
